<template>
  <div class="app-container">
    <!-- 流程设计器，负责绘制流程等 -->
    <my-process-designer v-if="xmlString !== undefined" :key="`designer-${reloadIndex}`"
      v-model="xmlString" v-bind="controlForm" keyboard ref="processDesigner"
      @init-finished="initModeler" @save="save" />

    <!-- 流程属性器，负责编辑每个流程节点的属性 -->
    <my-properties-panel :key="`penal-${reloadIndex}`" :bpmn-modeler="modeler"
      :prefix="controlForm.prefix" class="process-panel" :model="model" />
  </div>
</template>

<script>
import translations from "@/components/bpmnProcessDesigner/src/translations";
// 自定义元素选中时的弹出菜单（修改 默认任务 为 用户任务）
import CustomContentPadProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/content-pad";
// 自定义左侧菜单（修改 默认任务 为 用户任务）
import CustomPaletteProvider from "@/components/bpmnProcessDesigner/package/designer/plugins/palette";
// import xmlObj2json from "./utils/xml2json";
import MyProcessPalette from "@/components/bpmnProcessDesigner/package/palette/ProcessPalette";
import { createModel, getModel, updateModel } from "@/api/bpm/model";
// 自定义侧边栏
// import MyProcessPanel from "../package/process-panel/ProcessPanel";
import {
  createTaskAssignRule,
  saveBatchBtnConfig,
  saveBatchTimeConfig,
  updateTaskAssignRule,
  saveBatchApprovalRule,
} from "@/api/bpm/taskAssignRule";
import { Base64 } from 'js-base64';

export default {
  name: "App",
  components: { MyProcessPalette },
  data() {
    return {
      xmlString: undefined, // BPMN XML
      modeler: null,
      reloadIndex: 0,
      controlDrawerVisible: false,
      translationsSelf: translations,
      controlForm: {
        simulation: true,
        labelEditing: false,
        labelVisible: false,
        prefix: "flowable",
        headerButtonSize: "mini",
        additionalModel: [CustomContentPadProvider, CustomPaletteProvider],
      },
      addis: {
        CustomContentPadProvider,
        CustomPaletteProvider,
      },
      // 流程模型的信息
      model: {},
      //任务分配列表
      list: [],
      modelId: "",
      processModelId: "", //流程ID
    };
  },
  created() {
    this.processModelId = this.$route.query.processModelId;
    // 如果 modelId 非空，说明是修改流程模型
    const modelId = this.$route.query && this.$route.query.modelId;
    this.modelId = modelId;
    if (modelId) {
      getModel(modelId).then((response) => {
        this.xmlString = response.data.bpmnXml;
        this.model = {
          ...response.data,
          bpmnXml: undefined, // 清空 bpmnXml 属性
        };
        // this.controlForm.processId = response.data.key
      });
    }
  },
  methods: {
    initModeler(modeler) {
      setTimeout(() => {
        this.modeler = modeler;
        console.log(modeler);
      }, 10);
    },
    async save(bpmnXml) {
      const data = {
        ...this.model,
        bpmnXml: bpmnXml ? Base64.encode(bpmnXml) : null, // this.bpmnXml 只是初始化流程图，后续修改无法通过它获得
      };
      //审批按钮操作保存
      await this.saveBtns();
      //审批人设置相对时间
      await this.saveTimes();
      //流程规则绑定
      await this.createdId();
      // 修改的提交
      if (data.id) {
        updateModel(data).then((response) => {
          this.$modal.msgSuccess("修改成功");
          // 跳转回去
          this.close();
        });
        return;
      } else {
        // 添加的提交
        createModel(data).then((response) => {
          this.$modal.msgSuccess("保存成功");
          // 跳转回去
          this.close();
        });
      }
    },
    //从流程的xml文件中获取要保存的参数对象
    getbpmObj() {
      //从流程的xml文件中获取要保存的参数
      let bpmElement = window.bpmnInstances.elementRegistry._elements;
      bpmElement = Object.values(bpmElement);
      //获取所有审批人节点上的流程数据
      let processArr =
        bpmElement.length > 0
          ? bpmElement
            .filter((item) => item.element.type === "bpmn:UserTask")
            .map((item) => item.element.businessObject)
          : [];
      return processArr;
    },
    //批量保存审批人
    async createdId() {
      let processArr = this.getbpmObj();
      if (processArr.length == 0) return;
      let that = this;
      let params = processArr.map((item) => {
        let obj = {};
        obj.options = that.filterType(item);
        obj.taskDefinitionKey = item.id;
        obj.type = item.approverType || "10";
        obj.modelId = that.modelId; // 模型编号
        return obj;
      });
      await saveBatchApprovalRule(params);
    },
    //审批人根据规则类型获取相对应数据
    filterType(form) {
      let type = Number(form.approverType);
      // 将 roleIds 等选项赋值到 options 中
      let options = [];
      if (type === 10) {
        options = form.roleIds;
      } else if (type === 20 || type === 21) {
        options = form.deptIds;
      } else if (type === 22) {
        options = form.postIds;
      } else if (type === 30 || type === 31 || type === 32) {
        options = form.userIds;
      } else if (type === 40) {
        options = form.userGroupIds;
      } else if (type === 50) {
        options = form.scripts;
      }
      return Array.isArray(options)
        ? options
        : options == "" || options == undefined
          ? []
          : options.split(",").map((item) => Number(item));
    },
    //批量保存审批按钮
    saveBtns() {
      let processArr = this.getbpmObj();
      if (processArr.length == 0) return;
      // if (processArr.length == 0) {
      //   this.$message.info("不是一个有效的流程定义！");
      //   return false;
      // }
      let params =
        processArr.length > 0 &&
        processArr.map((item) => {
          let obj = {};
          obj.actId = item.id;
          obj.modelId = this.modelId;
          obj.addSignBtn = item.addSignBtn !== undefined;
          obj.agreeBtn = true;
          // obj.counterSignBtn = false; //此字段暂时没有，先保留，后续拓展
          obj.fallbackBtn = item.fallbackBtn !== undefined;
          obj.refuseBtn = true;
          // obj.saveBtn = false;
          obj.transferBtn = item.transferBtn !== undefined;
          return obj;
        });
      return saveBatchBtnConfig(params);
    },
    saveTimes() {
      let processArr = this.getbpmObj();
      if (processArr.length == 0) return;
      let params =
        processArr.length > 0 &&
        processArr.map((item) => {
          let obj = {};
          obj.actId = item.id;
          obj.modelId = this.modelId;
          obj.deadDayCount =
            item.deadDayCount == undefined ? 0 : item.deadDayCount;
          return obj;
        });
      return saveBatchTimeConfig(params);
    },
    //保存审批人设置时间
    /** 关闭按钮 */
    close() {
      //this.$tab.closeOpenPage({ path: "/bpm/manager/model" });
      this.$tab.closeOpenPage({
        path: "/bpm/process-instance/look",
        query: { modelId: this.processModelId },
      });
    },
  },
};
</script>

<style lang="scss">
//body {
//  overflow: hidden;
//  margin: 0;
//  box-sizing: border-box;
//}
//.app {
//  width: 100%;
//  height: 100%;
//  box-sizing: border-box;
//  display: inline-grid;
//  grid-template-columns: 100px auto max-content;
//}
.demo-control-bar {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 1;

  .open-control-dialog {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 32px;
    background: rgba(64, 158, 255, 1);
    color: #ffffff;
    cursor: pointer;
  }
}

// TODO 芋艿：去掉多余的 faq
//.info-tip {
//  position: fixed;
//  top: 40px;
//  right: 500px;
//  z-index: 10;
//  color: #999999;
//}

.control-form {
  .el-radio {
    width: 100%;
    line-height: 32px;
  }
}

.element-overlays {
  box-sizing: border-box;
  padding: 8px;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 4px;
  color: #fafafa;
}

.my-process-designer {
  height: calc(100vh - 84px);
}

.process-panel__container {
  position: absolute;
  right: 0;
  top: 55px;
  height: calc(100vh - 84px);
}
</style>
